<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>vue3响应式原理</h2>
</body>
<script>
    let person = {
        name:'张三',
		age:18
    }
    // // 模拟vue2响应式原理
    // let p = {}
    // Object.defineProperty(p,'name',{
    //     configurable:true,
    //     get(){ //有人读取name时调用
    //         return person.name
    //     },
    //     set(value){ //有人修改name时调用
    //         console.log('有人修改了name属性，我发现了，我要去更新界面！')
    //         person.name = value
    //     }
    // })

    // 模拟Vue3中实现响应式
    const p = new Proxy(person,{
        //有人读取p的某个属性时调用
        get(target,propName){
            console.log(`有人读取了p身上的${propName}属性`)
            return Reflect.get(target,propName)
        },
        //有人修改p的某个属性、或给p追加某个属性时调用
        set(target,propName,value){
            console.log(`有人修改了p身上的${propName}属性，我要去更新界面了！`)
            Reflect.set(target,propName,value)
        },
        //有人删除p的某个属性时调用
        deleteProperty(target,propName){
            console.log(`有人删除了p身上的${propName}属性，我要去更新界面了！`)
            return Reflect.deleteProperty(target,propName)
        }
    })
</script>
</html>